<template>
  <div class="popu">
    <van-popup v-model="shows.show" closeable close-icon-position="top-left" get-container=".box" close-icon="arrow-left"
      :style="{ height: '100%', width: '100%' }" @click-close-icon="loses">
      <h6 class="hi_h6">确认订单</h6>
      <div class="hi_box">
        <router-link :to="{path:'/addresspage',query:{name:1}}">
          <div class="hi_bchil">
          <div v-if="addresss.address.recipient" class="p_t_b m_left">
            <span>姓名：{{ addresss.address.recipient }}</span><span>电话：{{addresss.address.phoneNumber}}</span><span>地址：{{addresss.address.fullAddress}}</span>
          </div>
          <div v-if="!addresss.address.recipient" class="m_left" @click="los">请选择收获地址</div>
          <van-icon name="arrow" style="margin-right: 10px;" />
        </div>
        </router-link>
      
        <div class="hi_box2 m_top">
          <div class="m_left p_t_b">
            <img src="https://img0.baidu.com/it/u=728939412,3173172533&fm=253&fmt=auto&app=138&f=PNG?w=500&h=500"
              height="20" width="20" alt="" style="border-radius: 10px;">
            华北七鲜云超
          </div>

          <div style="display: flex;justify-content: space-between;">
            <div class="m_left">
              七鲜云卖场配送
            </div>
            <div class="m_right green" @click="shows.show2 = true">请选择送达时间<van-icon name="arrow" /> </div>
          </div>

          <div class="p_t_b dis_betun" style="align-items: center;">
            <div>
              <span v-for="item in nupro.lis">
                <van-badge :content="'x'+item.num">
                <img class="m_left" width="70" height="70" :src="item.img" alt="">
              </van-badge>
              </span>
            </div>
          <span>共{{ nupro.lis.length }}种<van-icon name="arrow" /></span>
          </div>
        </div>
        <div class="m_top b_fff b_rads ft_si14">

          <div class="dis_betun p_t_b">
            <span class="m_left">商品总额</span>
            <span class="m_right">￥{{ (nupro.price/100).toFixed(2) }}</span>
          </div>
          <div class="dis_betun" style="padding-bottom:10px ;">
            <span class="m_left">运费</span>
            <span class="m_right">￥0.00</span>
          </div>
        </div>

        <div class="m_top b_fff b_rads ft_si14">
          <div class="dis_betun p_t_b">
            <span class="m_left">优惠券</span>
            <span class="m_right"><van-icon name="arrow" /></span>
          </div>
        </div>

        <div class="m_top b_fff b_rads ft_si14">

          <div class="dis_betun p_t_b">
            <span class="m_left">订单备注</span>
            <span class="m_right">点击选择<van-icon name="arrow" /></span>
          </div>
          <div class="dis_betun" style="padding-bottom:10px ;">
            <span class="m_left">发票</span>
            <span class="m_right">不开发票<van-icon name="arrow" /></span>
          </div>
          <div class="dis_betun" style="padding-bottom:10px ;">
            <span class="m_left">商品若缺货</span>
            <span class="m_right">其他商品继续配送（缺货商品退款）<van-icon name="arrow" /></span>
          </div>
        </div>
        <footer class="p_t_b dis_betun b_fff"
          style="position: absolute;left: 0; bottom: 0;width: 100%;align-items: center;height: 30px;">
          <span class="m_left">
            <span style="line-height: 30px;">实付款</span>
            <span>￥{{ (nupro.price/100).toFixed(2) }}</span>
          </span>
          <van-button class="m_right" size="small" type="primary" style="border-radius: 15px;"
            @click="shows.show2 = true">提交订单</van-button>

          <van-popup v-model="shows.show2" closeable position="bottom" class="dis_betun" :style="{ height: '50%' }">
            <div style="padding-bottom: 10px;">
              <h6 class="p_t_b tx_cent ft_si14" style="height: 40px;line-height: 40px;">请选择送达时间</h6>
              <div class="dis_betun" style="color: #006400;">
                <div class="m_left">
                  <span>09月25日</span>
                  <span class="m_left">今天</span>
                </div>
                <div class="dis_betun" style="flex: 1;">
                  <div>
                    <span class="m_left">15:00-21:00</span>
                    <span class="m_left">免运费</span>
                  </div>

                  <van-checkbox v-model="shows.checked" checked-color="#006400" class="m_right"></van-checkbox>
                </div>

              </div>
            </div>
            <div style="flex: 1;" class="dis_betun">
              <div style="flex: 1;background: #eee;"></div>
              <div style="flex: 2;"> </div>
            </div>
            <div class="box_sz b_fff" style="position: absolute;bottom: 0;left: 0;">
              <router-link :to="{ path: '/topayment', query: { name: orderid } }">
                <van-button type="primary" size="large" @click="dorcli">确定</van-button>
              </router-link>
            </div>
        
          </van-popup>
        </footer>
      </div>
    </van-popup>
  </div>
</template>

<script>
import axios from 'axios'
export default {
  mounted(){
    this.lis=this.list
    this.load()
  },
  data() {
    return {
      orderid: Date.now()
    }
  },
  props: {
    shows: {
      type: Object
    },
    nupro:{
      type:Object
    },
    list:{
      type:Array
    },
    addresss:{
      type:Object
    }
  },
  methods: {
    load(){
      this.$emit('load')
    },
    async dorcli() {
      let order = {
        address:{
          userAddress:this.addresss.address.fullAddress,
          userName:this.addresss.address.recipient,
          userPhone:this.addresss.address.phoneNumber
        },
        price:(this.nupro.price/100).toFixed(2),
        commodity:this.nupro.lis
      }
      localStorage.setItem('order',JSON.stringify(order))
      this.shows.show3 = true
      let orderid = Date.now()
      this.orderid = orderid
      let desc = Date.now()
      let amount = Date.now()
      // console.log(orderid, desc, amount);
      // let res = await axios({method: 'post',url: '8.134.169.207/wxpay/getpayurl',data: {orderid,desc,amount}})
      // console.log(res);
    },
    los(){
      console.log(this.addresss.address);
    },
    loses(){
      sessionStorage.setItem('bln',false)
      console.log(sessionStorage.getItem('bln'));
    }
  },
}
</script>

<style lang="scss" scoped>
.hi_box2 {
  display: flex;
  flex-direction: column;
  background: #fff;
  border-radius: 5px;
  font-size: 14px;
}

.hi_h6 {
  height: 50px;
  text-align: center;
  line-height: 50px;
  font-size: 18px;
  color: #666;
}

.box_sz {
  box-sizing: border-box;
  width: 100%;
  padding: 8px 20px;

  button {
    height: 30px;
    border-radius: 15px;
  }
}

.b_fff {
  background: #fff;
}

.tx_cent {
  text-align: center;
}

.ft_si14 {
  font-size: 14px;
}

.b_rads {
  border-radius: 5px;
}

.dis_betun {
  display: flex;
  justify-content: space-between;
}

.green {
  color: rgba($color: #006400, $alpha: .8)
}

.m_left {
  margin-left: 10px;
}

.m_right {
  margin-right: 10px;
}

.p_t_b {
  padding: 8px 0;
}

.m_top {
  margin-top: 10px;
}

.van-popup {
  display: flex;
  flex-direction: column;
}

.hi_box {
  flex: 1;
  background: rgb(245, 245, 245);
  box-sizing: border-box;
  padding: 3% 3% 50px 3%;
  position: relative;

  .hi_bchil {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: #fff;
    border-radius: 5px;

    div {
      color: rgba($color: #006400, $alpha: .8)
    }
  }
}
</style>
